<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理 - 新能源充电桩云平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#8C8C8C',
                        light: '#F5F5F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .status-dot {
                @apply w-2 h-2 rounded-full inline-block mr-2;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-30">
        <div class="container mx-auto px-4 flex items-center justify-between h-16">
            <div class="flex items-center gap-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="flex items-center gap-2">
                    <i class="fa fa-bolt text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-gray-800">充电桩云平台</h1>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索设备..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="flex items-center gap-3">
                    <button class="relative p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                        <i class="fa fa-bell text-lg"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div class="h-8 w-px bg-gray-200"></div>
                    <div class="flex items-center gap-2">
                        <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                        <span class="hidden md:inline text-sm font-medium">管理员</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="bg-white w-64 shadow-sm fixed lg:static h-[calc(100vh-4rem)] z-20 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 overflow-y-auto">
            <nav class="p-4">
                <div class="space-y-1">
                    <a href="/" class="sidebar-item">
                        <i class="fa fa-tachometer w-5 text-center"></i>
                        <span>控制台</span>
                    </a>
                    <a href="#devices" class="sidebar-item active">
                        <i class="fa fa-plug w-5 text-center"></i>
                        <span>设备管理</span>
                    </a>
                    <a href="#transactions" class="sidebar-item">
                        <i class="fa fa-exchange w-5 text-center"></i>
                        <span>交易记录</span>
                    </a>
                    <a href="#pricing" class="sidebar-item">
                        <i class="fa fa-money w-5 text-center"></i>
                        <span>电价策略</span>
                    </a>
                    <a href="#reports" class="sidebar-item">
                        <i class="fa fa-bar-chart w-5 text-center"></i>
                        <span>数据分析</span>
                    </a>
                </div>

                <div class="mt-8 pt-6 border-t border-gray-100">
                    <h3 class="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider">系统管理</h3>
                    <div class="mt-3 space-y-1">
                        <a href="#users" class="sidebar-item">
                            <i class="fa fa-users w-5 text-center"></i>
                            <span>用户管理</span>
                        </a>
                        <a href="#settings" class="sidebar-item">
                            <i class="fa fa-cog w-5 text-center"></i>
                            <span>系统设置</span>
                        </a>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto p-4 lg:p-6 bg-gray-50">
            <div class="container mx-auto">
                <!-- 页面标题和操作区 -->
                <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">设备管理</h2>
                        <p class="text-gray-500 mt-1">管理和监控所有充电桩设备</p>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <div class="relative">
                            <select class="pl-4 pr-10 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white text-sm appearance-none">
                                <option>所有状态</option>
                                <option>在线</option>
                                <option>充电中</option>
                                <option>离线</option>
                                <option>故障</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                        </div>
                        <div class="relative">
                            <select class="pl-4 pr-10 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white text-sm appearance-none">
                                <option>所有型号</option>
                                <option>EC-5000</option>
                                <option>EC-3000</option>
                                <option>EC-1000</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                        </div>
                        <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
                            <i class="fa fa-refresh"></i>
                            <span>刷新</span>
                        </button>
                    </div>
                </div>

                <!-- 设备统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <!-- 总设备数 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">总设备数</p>
                                <h3 class="text-3xl font-bold mt-1" id="total-devices">0</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12 台 (本周)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-plug text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 在线设备 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">在线设备</p>
                                <h3 class="text-3xl font-bold mt-1" id="online-devices">0</h3>
                                <p class="text-gray-500 text-sm mt-2" id="online-rate">0%</p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-signal text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 充电中设备 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">充电中设备</p>
                                <h3 class="text-3xl font-bold mt-1" id="charging-devices">0</h3>
                                <p class="text-warning text-sm mt-2" id="charging-rate">0%</p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-bolt text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 故障设备 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">故障设备</p>
                                <h3 class="text-3xl font-bold mt-1" id="fault-devices">0</h3>
                                <p class="text-danger text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 2 台 (今日)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-danger/10 flex items-center justify-center text-danger">
                                <i class="fa fa-exclamation-triangle text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 设备列表 -->
                <div class="bg-white rounded-xl p-5 card-shadow mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-800">设备列表</h3>
                        <div class="relative">
                            <input type="text" placeholder="搜索设备ID或位置..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64 text-sm">
                            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备ID</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">位置</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">固件版本</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近活动</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody id="device-table-body" class="divide-y divide-gray-200">
                                <!-- 设备数据将通过JavaScript动态加载 -->
                                <tr class="animate-pulse">
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-24"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-6 bg-gray-200 rounded w-20"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-32"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-28"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-8 bg-gray-200 rounded w-32"></div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页 -->
                    <div class="flex items-center justify-between mt-6">
                        <div class="text-sm text-gray-500">
                            显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium" id="total-devices-count">0</span> 条记录
                        </div>
                        <div class="flex items-center gap-2">
                            <button class="px-3 py-1 rounded border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fa fa-chevron-left text-xs"></i>
                            </button>
                            <button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
                            <button class="px-3 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-50">2</button>
                            <button class="px-3 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-50">3</button>
                            <button class="px-3 py-1 rounded border border-gray-200 text-gray-500 hover:bg-gray-50">
                                <i class="fa fa-chevron-right text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 设备详情模态框 -->
    <div id="device-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b border-gray-100 flex items-center justify-between">
                <h3 class="text-xl font-bold text-gray-800" id="modal-device-id">设备详情</h3>
                <button id="close-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <!-- 设备基本信息 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">设备ID</h4>
                        <p class="font-medium" id="modal-device-id-value">EV-20230567</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">型号</h4>
                        <p class="font-medium" id="modal-device-model">EC-5000</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">状态</h4>
                        <p class="font-medium" id="modal-device-status"><span class="status-dot bg-success"></span>在线</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">固件版本</h4>
                        <p class="font-medium" id="modal-device-firmware">v2.3.5</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">IP地址</h4>
                        <p class="font-medium" id="modal-device-ip">192.168.1.105</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">最近活动</h4>
                        <p class="font-medium" id="modal-device-last-active">2分钟前</p>
                    </div>
                </div>

                <!-- 位置信息 -->
                <div class="mb-8">
                    <h4 class="text-base font-semibold text-gray-800 mb-4">位置信息</h4>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <h5 class="text-sm text-gray-500 mb-1">地址</h5>
                                <p class="font-medium" id="modal-device-address">海淀区中关村大街1号</p>
                            </div>
                            <div>
                                <h5 class="text-sm text-gray-500 mb-1">坐标</h5>
                                <p class="font-medium" id="modal-device-coordinates">39.983424, 116.315912</p>
                            </div>
                        </div>
                        <div class="h-48 bg-gray-200 rounded-lg flex items-center justify-center">
                            <i class="fa fa-map-marker text-4xl text-gray-400"></i>
                        </div>
                    </div>
                </div>

                <!-- 实时数据 -->
                <div class="mb-8">
                    <h4 class="text-base font-semibold text-gray-800 mb-4">实时数据</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h5 class="text-sm text-gray-500 mb-1">电流 (A)</h5>
                            <p class="text-2xl font-bold" id="modal-device-current">12.5</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h5 class="text-sm text-gray-500 mb-1">电压 (V)</h5>
                            <p class="text-2xl font-bold" id="modal-device-voltage">220.3</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h5 class="text-sm text-gray-500 mb-1">功率 (kW)</h5>
                            <p class="text-2xl font-bold" id="modal-device-power">2.75</p>
                        </div>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <canvas id="deviceMetricsChart" height="200"></canvas>
                    </div>
                </div>

                <!-- 操作命令 -->
                <div>
                    <h4 class="text-base font-semibold text-gray-800 mb-4">发送命令</h4>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">命令类型</label>
                                <select id="command-type" class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white">
                                    <option value="restart">重启设备</option>
                                    <option value="update_firmware">更新固件</option>
                                    <option value="set_max_current">设置最大电流</option>
                                    <option value="clear_alarm">清除告警</option>
                                    <option value="diagnose">诊断设备</option>
                                </select>
                            </div>
                            <div id="param-input-container" class="hidden">
                                <label class="block text-sm font-medium text-gray-700 mb-1">参数值</label>
                                <input type="text" id="command-param" class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white">
                            </div>
                        </div>
                        <div class="flex justify-end">
                            <button id="send-command" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2">
                                <i class="fa fa-paper-plane"></i>
                                <span>发送命令</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });

        // 模态框控制
        const deviceModal = document.getElementById('device-modal');
        document.getElementById('close-modal').addEventListener('click', function() {
            deviceModal.classList.add('hidden');
        });

        // 点击模态框外部关闭
        deviceModal.addEventListener('click', function(e) {
            if (e.target === deviceModal) {
                deviceModal.classList.add('hidden');
            }
        });

        // 命令类型选择变化
        document.getElementById('command-type').addEventListener('change', function() {
            const paramContainer = document.getElementById('param-input-container');
            if (this.value === 'set_max_current') {
                paramContainer.classList.remove('hidden');
                paramContainer.classList.remove('md:col-span-1');
                paramContainer.classList.add('md:col-span-1');
            } else {
                paramContainer.classList.add('hidden');
            }
        });

        // 模拟数据
        const mockData = {
            totalDevices: 1286,
            onlineDevices: 954,
            chargingDevices: 328,
            faultDevices: 38,
            devices: [
                { id: 'EV-20230567', model: 'EC-5000', status: 'charging', location: '海淀区中关村大街1号', firmware: 'v2.3.5', lastActive: '2分钟前' },
                { id: 'EV-20230421', model: 'EC-5000', status: 'online', location: '朝阳区建国路88号', firmware: 'v2.3.5', lastActive: '5分钟前' },
                { id: 'EV-20230915', model: 'EC-3000', status: 'online', location: '西城区金融大街28号', firmware: 'v1.9.2', lastActive: '12分钟前' },
                { id: 'EV-20230103', model: 'EC-5000', status: 'fault', location: '东城区王府井大街88号', firmware: 'v2.3.5', lastActive: '35分钟前' },
                { id: 'EV-20230742', model: 'EC-3000', status: 'offline', location: '海淀区学院路38号', firmware: 'v1.9.2', lastActive: '2小时前' },
                { id: 'EV-20230218', model: 'EC-1000', status: 'online', location: '丰台区科技园10号', firmware: 'v3.1.0', lastActive: '47分钟前' },
                { id: 'EV-20230673', model: 'EC-5000', status: 'charging', location: '海淀区上地信息产业基地', firmware: 'v2.3.5', lastActive: '1分钟前' },
                { id: 'EV-20230394', model: 'EC-3000', status: 'online', location: '朝阳区CBD商务中心', firmware: 'v1.9.2', lastActive: '8分钟前' },
                { id: 'EV-20230851', model: 'EC-1000', status: 'offline', location: '海淀区五道口大街', firmware: 'v3.1.0', lastActive: '5小时前' },
                { id: 'EV-20230462', model: 'EC-5000', status: 'online', location: '海淀区清华科技园', firmware: 'v2.3.5', lastActive: '15分钟前' }
            ]
        };

        // 填充统计数据
        document.getElementById('total-devices').textContent = mockData.totalDevices.toLocaleString();
        document.getElementById('online-devices').textContent = mockData.onlineDevices.toLocaleString();
        document.getElementById('online-rate').textContent = Math.round(mockData.onlineDevices / mockData.totalDevices * 100) + '%';
        document.getElementById('charging-devices').textContent = mockData.chargingDevices.toLocaleString();
        document.getElementById('charging-rate').textContent = Math.round(mockData.chargingDevices / mockData.totalDevices * 100) + '%';
        document.getElementById('fault-devices').textContent = mockData.faultDevices.toLocaleString();
        document.getElementById('total-devices-count').textContent = mockData.totalDevices.toLocaleString();

        // 填充设备列表
        const deviceTableBody = document.getElementById('device-table-body');
        deviceTableBody.innerHTML = '';

        mockData.devices.forEach(device => {
            let statusClass = 'bg-gray-100 text-gray-600';
            let statusText = device.status;
            let statusDotClass = 'bg-gray-300';

            switch(device.status) {
                case 'online':
                    statusClass = 'bg-success/10 text-success';
                    statusText = '在线';
                    statusDotClass = 'bg-success';
                    break;
                case 'charging':
                    statusClass = 'bg-warning/10 text-warning';
                    statusText = '充电中';
                    statusDotClass = 'bg-warning';
                    break;
                case 'fault':
                    statusClass = 'bg-danger/10 text-danger';
                    statusText = '故障';
                    statusDotClass = 'bg-danger';
                    break;
                case 'offline':
                    statusClass = 'bg-gray-100 text-gray-500';
                    statusText = '离线';
                    statusDotClass = 'bg-gray-300';
                    break;
            }

            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50 transition-colors';
            row.innerHTML = `
                <td class="px-4 py-4 whitespace-nowrap font-medium text-gray-800">${device.id}</td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-600">${device.model}</td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full ${statusClass}">
                        <span class="status-dot ${statusDotClass}"></span>${statusText}
                    </span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-600">${device.location}</td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-600">${device.firmware}</td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-600">${device.lastActive}</td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                        <button class="view-device-btn px-3 py-1 text-sm border border-primary text-primary rounded hover:bg-primary/5 transition-colors" data-device-id="${device.id}">
                            查看
                        </button>
                        <button class="px-3 py-1 text-sm border border-gray-200 text-gray-700 rounded hover:bg-gray-50 transition-colors">
                            操作
                        </button>
                    </div>
                </td>
            `;
            deviceTableBody.appendChild(row);
        });

        // 查看设备详情按钮事件
        document.querySelectorAll('.view-device-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const deviceId = this.getAttribute('data-device-id');
                // 在实际应用中，这里应该通过API获取设备详情
                document.getElementById('modal-device-id').textContent = `设备详情 - ${deviceId}`;
                document.getElementById('modal-device-id-value').textContent = deviceId;
                deviceModal.classList.remove('hidden');

                // 绘制设备指标图表
                const ctx = document.getElementById('deviceMetricsChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '现在'],
                        datasets: [{
                            label: '电流 (A)',
                            data: [0, 0, 8.5, 12.3, 15.8, 10.2, 12.5],
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4
                        }, {
                            label: '电压 (V)',
                            data: [220.1, 219.8, 220.5, 221.2, 220.8, 220.3, 220.3],
                            borderColor: '#36CFC9',
                            backgroundColor: 'rgba(54, 207, 201, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                }
                            }
                        }
                    }
                });
            });
        });

        // 发送命令按钮事件
        document.getElementById('send-command').addEventListener('click', function() {
            const commandType = document.getElementById('command-type').value;
            let param = document.getElementById('command-param').value;

            // 模拟命令发送
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 发送中...';
            this.disabled = true;

            setTimeout(() => {
                this.innerHTML = '<i class="fa fa-check mr-2"></i> 发送成功';
                this.classList.remove('bg-primary');
                this.classList.add('bg-success');

                setTimeout(() => {
                    this.innerHTML = '<i class="fa fa-paper-plane mr-2"></i> 发送命令';
                    this.disabled = false;
                    this.classList.remove('bg-success');
                    this.classList.add('bg-primary');
                }, 2000);
            }, 1500);
        });
    </script>
</body>
</html>